<#import '/fed/demo/inc/page.ftl' as macros />
<@macros.header 'select'>

</@macros.header>

<@macros.body 'select' 'select' 'select'>

  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="examples">案例</h1>
    </div>

    <h3>据原生的 select 初始化</h3>
    <div class="bs-callout bs-callout-warning">
      select 的 option 值不能出现相同的情况
    </div>
    <div class="bs-example">
      <select name="" id="select">
        <option value="0">全部</option>
        <option value="1">值一</option>
      </select>
    </div>
    <div class="highlight">
      <pre>
      <code class="language-js">
var select = new Select({
  field: '#select'
});
      </code>
      </pre>
    </div>
    <h3>异步方式 select 初始化</h3>
    <div class="bs-callout bs-callout-warning">
      dom 只能用 input, 不能用 select
    </div>
    <div class="bs-example">
      <input type="text" id="style">
    </div>
    <div class="highlight">
      <pre>
      <code class="language-js">
var select = new Select({
  field: '#style',
  key: {
    text: 'styleName',
    value: 'id'
  },
  value: '11111',
  url: 'styleList'
});
      </code>
      </pre>
    </div>

    <h3>异步方式 select 多选初始化</h3>
    <div class="bs-callout bs-callout-warning">
      dom 只能用 input, 不能用 select
    </div>
    <div class="bs-example">
      <input type="text" id="style1" value="11111,11112">
    </div>
    <div class="highlight">
      <pre>
      <code class="language-js">
var select = new Select({
  field: '#style1',
  multiple: true,
  key: {
    text: 'styleName',
    value: 'id'
  },
  url: 'styleList'
});
      </code>
      </pre>
    </div>
  </div>
</@macros.body>

<@macros.footer>

</@macros.footer>